<template>
	<div class="nav" :class="{'on' : type === 'home'}" v-if="type === 'home'">
		<ul>
			<li v-for="(item, index) in menus" v-if="index < 6" :class="{'on' : index === 0}">
				<router-link :to="item.url">{{item.title}}</router-link>
			</li>
			<li>
				<router-link :to="{name: 'mall'}">商城</router-link>
			</li>
		</ul>
		<!--ul>
			<li v-for="(item, index) in menus" v-if="index >= 7">
				<router-link :to="item.url">{{item.title}}</router-link>
			</li>
		</ul-->
	</div>
</template>

<script>
	export default {
		name: "Nav",
		props:["type", "menus"],
		data: function(){
			return {
				
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	@baseBF: 100/1%;
	.nav{
		padding:5/@base 20/@base 0 20/@base;
		display:none;
		&.on{
			display:block;
		}
		ul{
			display:flex;
			li{
				width:@baseBF/7;
				line-height: 60/@base;
				text-align:center;
				&.on{
					border-bottom:5/@base solid #fff;
				}
				a{
					color:#fff;
				}
			}
		}
	}
</style>
